<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>DOM样式测试</h1>
    <h2>水果列表</h2>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>鸭梨</li>
    </ul>
    <!-- <button>按钮</button> -->
    <input type="text">
    <!-- <button class="">输出</button> -->

    <img src="images/1.png" alt="">
    <button>切换图片</button>
    <script>

        //document.querySelector使用
        var h1 = document.querySelector("h1");
        //querySelector的返回值是一个DOM对象，该方法可以通过选择器获取元素，若选择器找到多个元素，则返回第一个。
        h1.style.color = "red";
        console.log(h1)      //返回值是dom对象
        //DOM对象的style属性可以设置元素内联样式。



        // document.querySelectorALL使用
        var fruits = document.querySelectorAll("li")
        //querySelectorAll方法的返回值是一个类数组的集合，里面保存的是获取的所有元素，所以如果希望为每一个元素设置样式，需要遍历这个集合
        for (var i = 0; i < fruits.length; i++) {
            fruits[i].style.color = "blue";
        }

        //绑定事件
        // var btn = document.querySelector("button")
        // btn.onclick = function(){
        //     console.log("绑定事件")
        // }

        // 操作属性：例如input的value属性值，或者img的src属性。
        // var input = document.querySelector("input");
        // var btn = document.querySelector("button");
        // btn.onclick = function () {
        //     var text = input.value;    //获取input的value属性
        //     console.log(text);
        // }

        var img = document.querySelector("img")
        var btn =document.querySelector("button")
        btn.onclick = function(){
            img.src = "images/2.png"
        }

    </script>
</body>

</html>